<template>
    <div>
        <div class="menu">
            <div class="infoBox">
                <div class="info">
                    <div class="tou">
                        <img  src="../assets/img/morentouxiang.png" alt="">
                    </div>
                    <b style="margin-left:10px;font-size:14px">韩茜茜</b>
                </div>
                <br>
               
                <div class="qiye">
                    <div>企业名称：</div>
                    <div>河南中电投华新电力工程有限公司</div>
                </div>
                <br>
                <div class="qiye">
                    <div>本次登录时间：</div>
                    <div>2021-04-23 21:51</div>
                </div>
                <br>
                <div class="qiye">
                    <div>上次登录时间：</div>
                    <div>2021-04-23 21:42</div>
                </div>
            </div>
            <ul class="menuList">
                <li :class="indx?'active':''"><a @click="indexFun()" ><i class="iconfont icon-iconindexsel"></i> 首页</a></li>
                <li :class="salaryCard?'active':''">
                    <a @click="salaryCardFun()"> <i class="iconfont icon-card"></i>工资卡管理</a>
                    <ul v-if="salaryCard" >
                        <li>
                            <a >工资卡信息查询</a>
                            <a>工资卡信息管理</a>
                            <a>经办人采集</a>
                        </li>
                    </ul>
                </li>
                <li :class="sendSalary?'active':''">
                    <a @click="sendSalaryFun()" ><i class="iconfont icon-gongzi"></i>工资发放管理</a>
                    <ul v-if="sendSalary" >
                        <li>
                            <a @click="look()">工资发放查询与申请</a>
                        </li>
                    </ul>
                </li>
                <li :class="app?'active':''">
                    <a @click="appFun()" ><i class="iconfont icon-app"></i>应用管家</a>
                    <ul v-if="app" >
                        <li>
                            <a>应用市场</a>
                            <a>我的应用</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data(){
        return{
            salaryCard:false,
            sendSalary:false,
            app:false,
            indx:false
        }
    },
    methods:{
        look(){
            this.$router.push({name:'wagesindex'})
            this.$emit("closeImg")
        },
        indexFun(){
            this.indx = true;
            this.app = false;
            this.sendSalary = false;
            this.salaryCard = false;

        },
        salaryCardFun(){
            console.log(1)
            this.salaryCard = !this.salaryCard
            this.sendSalary = false;
            this.app = false;
            this.indx = false;
        },
        sendSalaryFun(){
            this.sendSalary = !this.sendSalary
            this.salaryCard = false;
            this.app = false;
            this.indx = false;
        },
        appFun(){
            this.app = !this.app;
            this.salaryCard = false;
            this.sendSalary = false;
            this.indx = false;
        }
    }
}
</script>

<style lang="less"  scoped>
    
    .menu{
        position: fixed;
        transition: all 0.4s;
        color:white;
        font-family: "微软雅黑",Helvetica, Arial, sans-serif;
        width:220px;
        height: 100%;
        min-height: 838px;
        background-color: #233644;
        .infoBox{
            padding: 10px 25px 33px 25px;
            .info{
                display: flex;
                color:white;
                line-height: 48px;
                line-height: 48px;
                    img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .tou{
                width:48px;
                height:48px;
                border-radius: 50%;
                background-color: white;
                overflow: hidden;
            }
            .qiye{
                width:155px;
                padding-right: 15px;
                font-size: 14px;
            }
        }
        .menuList{
            font-size: 14px;
            box-sizing: border-box;
            overflow: hidden;
            li{
                
                &:hover{
                    background: #1a2b38;
                    
                }
                width:220px;
                a{
                    i{
                        margin-right:6px;
                    }
                    display: block;
                    padding: 14px 20px 14px 25px;
                }
                ul{
                    li{
                        a{
                            padding: 7px 10px 7px 10px;
                            padding-left: 64px;
                        }
                    }
                }
            }
            .active{
                box-sizing: border-box;
                transition: all 0.4s;
                background: #1a2b38;
                border-left: 4px #e83439 solid;
            }
        }
    }
    
    
</style>